<template>
  <div style="height: 100%;">
    <x-header :left-options="{backText: ''}">隐患排查</x-header>
    <simple-search @onSearch="search" :placeholder="'输入任务名称或发起人搜索'">
    </simple-search>
    <div class="main-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite">
        <!-- content -->
        <div style="height:calc(100% - 42px)">
          <tab :line-width="3" custom-bar-width="50px" active-color="#343434" default-color="#545454" bar-active-color="#F1A107" v-model="tab">
            <tab-item v-for="(item, index) in tab_titles" :key="index" :selected="tab === index" @click="tab = index">{{item}}</tab-item>
          </tab>

          <div v-if="tab==0">
              <div v-for="(item, i) in list" :key="i" class="card" @click="openInfo(item)">
              <div class="card-title">
                <span class="title-before"></span>
                <span>{{item.LINE}}</span>
              </div>
              <div class="card-body">
                <p><span>派发时间</span>{{item.STARTTIME.substring(0,16)}}</p>
                <p><span>截止时间</span>{{item.ENDTIME.substring(0,16)}}</p>
              </div>
              <div class="card-footer2">
                <button class="submit_button" @click.stop="btn1click">上报隐患</button>
                <button class="end_button" @click.stop="btn2click">结束巡查</button>
              </div>
            </div>
          </div>

          <div v-if="tab==1">
            <div v-for="(item, i) in list" :key="i" class="card" @click="openInfo(item)">
              <div class="card-title">
                <span class="title-before"></span>
                <span>{{item.LINE}}</span>
              </div>
              <div class="card-body">
                <p><span>派发时间</span>{{item.STARTTIME.substring(0,10)}}</p>
                <p><span>截止时间</span>{{item.ENDTIME.substring(0,10)}}</p>
              </div>
              <div class="card-footer1"><span>{{item.STATE}}</span></div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "hazardList",
  components: {},
  mounted () { },
  data () {
    return {
      tab: 0,
      tab_titles: ['未处理', '已完成'],
      list: [],
      page: 1,
      keyword: '',
      createPop: false,//弹出层是否创建
      loading: false//下拉刷新时禁止无限加载
    }
  },
  methods: {
    btn1click(){
      alert(1);
    },
    btn2click(){
      alert(2);
    },
    getFilter(fields, value) {
      var filter = '';
      if(value != '') {
        filter = ' and (';
        for(var i=0; i<fields.length; i++) {
          if(i != 0) {
            filter += ' or ';
          }
          filter += '(' + fields[i] + ' like \'%' + value + '%\' or \'' + value + '\'=\'\')';
        }
        filter += ')';
        console.log(filter);
      }
      return filter;
    },
    getData(callback, failed) {
      var filter = '';
      if(this.keyword != '') {
        filter = this.getFilter(['description', 'start_authorfullname'], this.keyword);
      }
        var params='{"_method":"component.getListData","_param":{"bizObj":"CHECK_MISSION","service":"selectMore","fields":"*","filter":"1=1","currentPageIndex":1,"pageSize":5,"orderList":[{"field":"STARTTIME","order":"desc"}],"QueryFormData":""}}';
        this.$ajax({
        method: 'post',
        url: this.COMMON_URL +'?_objName=CHECK_MISSION&_viewId=Check_Mission_List',
        data: {
          FixJSON: params
        }
      }).then((res) => {
        callback(res);
        console.log(res.data.datas);
      }).catch(err => {
        failed()
      })
    },
    openInfo(item){
      this.$store.commit('SET_CURRENT_ROW', item);
      this.$router.push('/hazard/hazardinfo')
    },
    infinite(done) {//上划加载方法
      console.log("infinite");
      console.log(this.page);
      if(this.loading) {
        done();//TODO 啥意思
      } else {
        this.getData((res) => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == '200' && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]//TODO 啥意思
              this.page++;
              done()
            } else {
              done(true)//有错误的情况或者没有记录，传参true
            }
          }, () => {
            done(true)
        });
      }
    },
    refresh(done) {
      this.page = 1;
      console.log("refresh");
      console.log(this.page);
      this.loading = true;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
          done()
        } else {
          done(true);
        }
        this.loading = false;
      }, () => {
          done(true);
      });
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData((res) => {
        if (res.status == '200' && res.data.datas.length > 0) {
          this.list = [...res.data.datas];
          this.page++;
        } else {
          this.list = [];
        }
      }, () => {
        this.list = [];
      });
    }
  }
}
</script>

<style scoped>
  ul{
    list-style:none;
  }
  .card {
    height:165px;
    background: #fff;
    padding-top: 14px;
    padding-left:34px;
    border-bottom:1px solid #EAEAEA;
  }
  .card-title{
    margin-bottom:12px;
    margin-left: -16px;
    font-weight: 600;
  }
  .card-title>p{
    font-size: 16px;
    font-weight:bold;
  }
  .card-body>p{
    display: block;
    margin:16px 0;
  }
  .card-body span{
    display: inline-block;
    margin-right:37px;
  }
  .warning {
    color: red;
    padding: 0 5px;
    background-color: pink;
    text-align: center;
    width: 140px;
    line-height: 30px;
    font-size: 14px;
  }
  .card-body{
    font-size:14px;
  }
  .card-footer1{
    background-color:#61AE82;
    background:rgba(97, 174, 130, .08);
    width:49px;
    height:20px;
    border-radius:3px;
    text-align:center;
  }
  .card-footer1>span{
    display:block;
    height:100%;
    font-size:11px;
    opacity:1;
    line-height:20px;
    color:#61AE82;
  }
  .card-footer2{
    padding: 0 61px 0 27px;
    display: flex;
    justify-content: space-between;
  }
  .card-footer2>button{
    width:67px;
    height:27px;
    border:0;
    outline:0;
    font-size:11px;
    border-radius:3px;
  }
  .submit_button{
    background:#4852D0;
    color:#fff;
  }
  .end_button{
    color:#4852D0;
    background:#F2F4F6;
  }
  .title-before{
    width: 3px;
    height: 13px;
    background-color: #A7AEFF;
    margin-right: 12px;
    display: inline-block;
  }
</style>
